<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>css</title>
    <style>
        /* {0,2,2,2} */
        
        .box#box ul.ul li#li {
            background-color: #f00;
        }
        /* {0,2,2,2} */
        
        div.box ul#ul.ul #li {
            background-color: #0f0;
        }
    </style>
</head>

<body>
    <!-- {1,*,*,*} -->
    <div class="box" id="box">
        <ul class="ul" id="ul">
            <li id="li" class="li">
                
            </li>
        </ul>
    </div>

    <!-- 
	
	计算样式   - 声明 层叠  继承 默认
	 层叠
		① 优先级
		   作者样式表  !important
		   默认样式表 !important
		   作者样式表
		  默认样式表
		② 特定性  {0,0,0,0}
			特定性的第一位  行内样式  1 选择器样式 0
			特定性的第二位  id选择器的个数
			特定性的第三位  类选择器 属性选择器
			特定性的第四位  标签选择器  伪类选择器
		③ 源次序
			选择器书写顺序 加载顺序
			
	继承  text- font- line-  color-  行高.
	
	
		css  层叠样式表
		
		行内样式       不推荐
		内部样式-内联
		外部样式-外联   推荐使用  利于seo
		
		选择器  
		   标签选择器  元素的标签名
			类选择器   .+类名
			id 选择器   #+ID名
			
			类名或者id名的 规范
				id唯一  一个id只能用一次 一个元素只能有一个id名
				类名随意 
			命名规则 
			  禁止:  禁止单个字母  a 不能是数字开头 1a 不能是拼音  hezi 不能汉字  盒子
			  取名规范:见名知义 使用英文单词 box,多个单词使用 - 链接  box-left box-right  ,可以数字结尾  box1box2
			
			后代选择器  空格
			子集选择器    >
			兄弟选择器  ~
			相邻选择器 +
			伪类选择器 nth-child(n)
		
		计算样式   - 声明 层叠  继承 默认
		 层叠
			① 优先级
			   作者样式表  !important
			   默认样式表 !important
			   作者样式表
			  默认样式表
			② 特定性  {0,0,0,0}
				特定性的第一位  行内样式  1 选择器样式 0
				特定性的第二位  id选择器的个数
				特定性的第三位  类选择器 属性选择器
				特定性的第四位  标签选择器  伪类选择器
			③ 源次序
				选择器书写顺序 加载顺序
				
		继承  text- font- line-  color-  行高... -->
</body>

</html>